<template>
  <div class="single-stat-pane">
    <a-row :gutter="8">
      <a-col :span="12">
        <div class="single-stat-box">
          <a-row class="today-row">
            <a-col :span="18">
              <div class="today">
                {{ todayData.follow }}
              </div>
              <div>
                今日新增
              </div>
            </a-col>
            <a-col :span="6">
              <img class="single-stat-box-img" src="../assets/sjtj1.png">
            </a-col>
          </a-row>
          <a-row class="yesterday-row">
            <a-col :span="14">
              昨日数据： {{ yesterdayData.follow }}
            </a-col>
            <a-col :span="10">
              累计： {{ totalData.follow }}
            </a-col>
          </a-row>
          <div class="box-line" style=" background: #40A9FF;"></div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="single-stat-box">
          <a-row class="today-row">
            <a-col :span="18">
              <div class="today">
                {{ todayData.netFollow }}
              </div>
              <div>
                今日净增
              </div>
            </a-col>
            <a-col :span="6">
              <img class="single-stat-box-img" src="../assets/sjtj2.png">
            </a-col>
          </a-row>
          <a-row class="yesterday-row">
            <a-col :span="14">
              昨日数据： {{ yesterdayData.netFollow }}
            </a-col>
            <a-col :span="10">
              累计： {{ totalData.netFollow }}
            </a-col>
          </a-row>
          <div class="box-line" style=" background: #FF688E;"></div>
        </div>
      </a-col>
    </a-row>
    <a-row class="mt-2" :gutter="8">
      <a-col :span="12">
        <div class="single-stat-box">
          <a-row class="today-row">
            <a-col :span="18">
              <div class="today">
                {{ todayData.join }}
              </div>
              <div>
                今日参与
              </div>
            </a-col>
            <a-col :span="6">
              <img class="single-stat-box-img" src="../assets/sjtj3.png">
            </a-col>
          </a-row>
          <a-row class="yesterday-row">
            <a-col :span="14">
              昨日数据： {{ yesterdayData.join }}
            </a-col>
            <a-col :span="10">
              累计： {{ totalData.join }}
            </a-col>
          </a-row>
          <div class="box-line" style=" background: #FFC71B;"></div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="single-stat-box">
          <a-row class="today-row">
            <a-col :span="18">
              <div class="today">
                {{ todayData.finish }}
              </div>
              <div>
                今日完成
              </div>
            </a-col>
            <a-col :span="6">
              <img class="single-stat-box-img" src="../assets/sjtj4.png">
            </a-col>
          </a-row>
          <a-row class="yesterday-row">
            <a-col :span="14">
              昨日数据：{{ yesterdayData.finish }}
            </a-col>
            <a-col :span="10">
              累计： {{ totalData.finish }}
            </a-col>
          </a-row>
          <div class="box-line" style=" background: #5DDCB2;"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>

    import API from '../../../../api/mp/gameData'

    export default {
        name: 'SingleDataPane',
        data () {
            return {
                todayData: {},
                yesterdayData: {},
                totalData: {}
            }
        },
        methods: {
            init (gameId, mpId, gzhUserId) {
                API.todayMap({ gzhUserId: gzhUserId || '', gameId: gameId || '', mpId: mpId || '' }).then(res => {
                    this.todayData = Object.assign({}, res)
                })
                API.yesterdayMap({ gameId: gameId || '', mpId: mpId || '' }).then(res => {
                    this.yesterdayData = Object.assign({}, res)
                })
                API.totalMap({ gameId: gameId || '', mpId: mpId || '' }).then(res => {
                    this.totalData = Object.assign({}, res)
                })
            }
        }
    }
</script>

<style lang="less">
    .single-stat-pane {
        min-width: 450px;

        .single-stat-box {
            position: relative;
            padding: 20px;
            min-width: 215px;
            height: 160px;
            background: white;

            .single-stat-box-img {
                width: 59px;
                height: 59px;
                border-radius: 50%;
            }

            .box-line {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;

            }

            .today-row {
                height: 115px;

                .today {
                    font-size: 44px;
                }

                .box-icon {

                }
            }

            .yesterday-row {
                height: 30px;
            }
        }
    }
</style>
